<template>
  <div class="centerSprite">
    <div id="header">
      <Header />
    </div>
    <div class="centerList">
      <HeaderSide :defaultIndexs="defaultIndex" />
      <div class="container">
          <div class="heart">
              <li>
                <img src="../../static/images/heart-1.jpg" alt="">
                <div>
                 <p>陈立波</p>
                  <p>2012年12月入党</p>
                 <p>中国机械工业集团有限公司</p>
                 <p>“一颗红心向着党”</p>
                </div>
              </li>
            <li>
              <img src="../../static/images/heart-1.jpg" alt="">
              <div>
                <p>陈立波</p>
                <p>2012年12月入党</p>
                <p>中国机械工业集团有限公司</p>
                <p>“一颗红心向着党”</p>
              </div>
            </li>
            <li>
              <img src="../../static/images/heart-1.jpg" alt="">
              <div>
                <p>陈立波</p>
                <p>2012年12月入党</p>
                <p>中国机械工业集团有限公司</p>
                <p>“一颗红心向着党”</p>
              </div>
            </li>
            <li>
              <img src="../../static/images/heart-1.jpg" alt="">
              <div>
                <p>陈立波</p>
                <p>2012年12月入党</p>
                <p>中国机械工业集团有限公司</p>
                <p>“一颗红心向着党”</p>
              </div>
            </li>
            <li>
              <img src="../../static/images/heart-1.jpg" alt="">
              <div>
                <p>陈立波</p>
                <p>2012年12月入党</p>
                <p>中国机械工业集团有限公司</p>
                <p>“一颗红心向着党”</p>
              </div>
            </li> <li>
            <img src="../../static/images/heart-1.jpg" alt="">
            <div>
              <p>陈立波</p>
              <p>2012年12月入党</p>
              <p>中国机械工业集团有限公司</p>
              <p>“一颗红心向着党”</p>
            </div>
          </li>
            <li>
              <img src="../../static/images/heart-1.jpg" alt="">
              <div>
                <p>陈立波</p>
                <p>2012年12月入党</p>
                <p>中国机械工业集团有限公司</p>
                <p>“一颗红心向着党”</p>
              </div>
            </li>

          </div>
      </div>
      <div id="footer">
        <Footer />
      </div>
    </div>
  </div>
</template>

<script>
  import header from  '../components/header.vue'
  import footer from '../components/footer.vue'
  import headerSide from '../components/side.vue'
  export default({
    data(){
      return {
        defaultIndex:2
      }
    },
    computed:{

    },
    components:{
      Header:header,
      Footer:footer,
      HeaderSide:headerSide
    }
  })
</script>
<style   >

  .breadClum a{
    font-size:16px;
    color:#6d6d6d;
  }
  .headerSide .container{
    overflow: hidden;
  }
  .centerList{
    background-image:url("../../static/images/list.jpg");
    background-position: center;
    background-repeat: no-repeat;
    height: 1210px;
    /*margin-top: -156px;*/
  }
  /*.headerSide .container  ul{*/
    /*background: rgba(0,0,0,0.4) !important; ;*/
  /*}*/
  /*.headerSide .container ul li.first{*/
    /*font-size: 36px;*/
    /*color: red !important;*/
  /*}*/
  /*.headerSide .container ul li.first a{*/
    /*font-size: 36px;*/
  /*}*/
  .videoTitleWrap{
    padding-top: 55px;
    text-align: center;
  }
  .videoTitleWrap .videoTitle{
    font-size: 28px;
    color:#000000 ;
    font-weight:Bold

  }
  .centerList .container{
    height: auto !important;
  }
  .videoTitleWrap p span:nth-child(1){
    margin-right: 50px;
  }
  .video{
    margin-top: 60px;
    margin-bottom: 120px;
  }
  .video video{
    width: 975px;
    height: 546px;
    margin: 0 auto;
  }
  .heart{
    overflow: hidden;
  }
  .heart li{
    position: relative;
    width: 329px;
    height: 325px;
    margin: 10px 2px;
    float: left;
    overflow: hidden;
  }
  .heart li div{
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 100%;
    height: 100px;
    background: rgba(0,0,0,0.4);
    text-align: center;
    font-size: 12px;
    color: white;
    line-height: 25px;
    transition: all .5s

  }
  .heart li:hover div{
    bottom: 0px;
  }
  .heart li div p:nth-child(1){
    font-size: 16px;
  }
  .heart li div p:nth-child(4){
    color: #ff3600;
  }
</style>
